<template>
    <view class='home-user' ref='saveChildRef0'>
        <view class='fromBox'>

            
<!-- <button id="agree-btn3" open-type="getUserInfo|agreePrivacyAuthorization" @getuserinfo="handleGetUserInfo" @agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意隐私协议并获取头像昵称信息</button> -->

            <button class='avatar-wrapper' open-type='chooseAvatar'   @chooseavatar="onChooseavatar">
                <image class='avatar' :src='avatarUrl'>
                </image>
            </button>
            <view class='text-center f24 col-hui'>
                <text>
                    点击头像上传 </text>
            </view>
            <view class="cell-from">
                <view>
                    <view class="cell" ref='saveChildRef3'>
                        <text class="weui-label cell-label">
                            昵称
                        </text>
                        <view class="cell-ipt">
                            <input type='nickname' class='weui-input' v-model='nickName' placeholder='请点击输入昵称' data-key='nickName' @input='getUserInput' @blur="getUserInput" />
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="commonFoot" style="margin-top:60px">

            <view class="foot-btn-box">
                <view class="foot-btn" @click="goSave">
                    <text>提交</text>
                </view>
            </view>
            <view class='h1 text-center col-hui'>
                完善信息便于更好的为您提供服务
            </view>
        </view>
    </view>

</template>
<script>
const defaultAvatarUrl =
    "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0";
const app = getApp();
import {uploadFunc} from '../../api'

export default {
    components: {},
    data () {
        return {
            avatarUrl: '',
            nickName: ''
        }
    },
    computed:{
        wechatInfo(){ return this.$store.getters.wechatInfo},
    },
    onLoad(){

        this.avatarUrl = this.wechatInfo.headimgurl || defaultAvatarUrl

        this.nickName = this.wechatInfo.nickname == '微信用户' ? '' :  this.wechatInfo.nickname

        // console.log('咋回事',this.wechatInfo)

        app.laterToken(bool => {

            app.logRecord('修改用户信息')

        })

    },
    methods: {

        // 获取用户输入的内容
        getUserInput (event) {
            const value = event.detail.value || event.detail.text

            // this.setData({ [key]: value })

            // console.log('1111', value)

            this.nickName = value
        },
        //头像
        onChooseavatar (e) {

            let self = this;

            let { avatarUrl } = e.detail;
            // uni.showLoading({
            //     title: '加载中'
            // });

            this.avatarUrl = avatarUrl

            // console.log('9999999', avatarUrl)

        },
        goSave(){
            // console.log('凌晨', this.nickName )

            // if( !this.nickName ){

            //     uni.showToast({
            //         title: '请输入昵称'
            //     });
            //     return
            // }

            if( !this.avatarUrl ){

                uni.showToast({
                    title: '请上传头像',
                    icon:'none'
                });
                return
            }

            //临时地址 先上传
            if( !this.avatarUrl.includes('https')){

                let that = this

                uploadFunc('zuul/api-f/files/uploadToDir', this.avatarUrl ,{'formData':{'directory': 'flash_goods'}})
                    .then( res =>{
                        // console.log('上传看看',res)
                        
                        // this.$getImg(res.id ,1)  

                        that.avatarUrl =  this.$getImg(res.id ,1)  

                        that.goSubmit()

                    })
            }
            else{
                this.goSubmit()
            }
        },
        goSubmit(){

            //修改微信用户表
            Promise.all([
                this.$axios({url:'tWechat/saveorupdate',data:{id:this.wechatInfo.id,'headimgurl':this.avatarUrl,'nickname':this.nickName}}),
                this.$axios({url:'back/user/modify/userInfo',data:{'headImg':this.avatarUrl,'name':this.nickName}})
            ])
           
                .then( res =>{

                    // console.log('999999',res)

                    let newWechatInfo = this.$deepClone( this.wechatInfo)

                    newWechatInfo.headimgurl = this.avatarUrl
                    newWechatInfo.nickname = this.nickName || '微信用户'


                    this.$store.commit('SET_WXUSER',newWechatInfo)

                    uni.navigateBack()

                })
            
        },
    }
}
</script>
<style lang="scss" scoped>
/**index.wxss**/
.home-user {
    background-color: #fff;
    width: 100%;
    // padding: 0 30rpx;
    /* box-shadow: 0 1px 10px #e1e1e1; */
}
.cell-from {
    // margin-top: 50px;
    width: 90%;
    margin: 50px auto 0;
    .cell {
        display: flex;
        font-size: 30rpx;
    }
    .cell-label{
        height: 66rpx;
        line-height: 66rpx;
    }
    .cell-ipt {
        flex: 1;
        padding-bottom: 20rpx;
        border-bottom: 1rpx solid #eaeaea;
        input{
            height: 66rpx;
            width: 100%;
        }
    }
}

.hold-img-box {
    width: 100%;
    position: relative;
    text-align: center;
    border-radius: 6px;
    overflow: hidden;
    margin: 100rpx 0 40rpx;
}

.openBtn {
    padding: 0;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    font-size: 26rpx;
    background-color: #1587fa;
    color: #fff;
    margin: 0;
}

.h1 {
    position: fixed;
    bottom: 20px;
    left: 0;
    width: 100%;
    color: #999;
    text-align: center;
    margin-top: 20rpx;
    font-size: 24rpx;
}

.fromBox {
    font-size: 28rpx;
    margin-top: 40px;
}

.avatar-wrapper {
    padding: 0;
    width: 56px !important;
    border-radius: 8px;
    margin-top: 40px;
    margin-bottom: 10px;
}

.avatar {
    display: block;
    width: 56px;
    height: 56px;
}

.weui-label {
    width: 60px;
}

.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>